<template>
  <div class="hello">
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
import * as d3 from 'd3';
export default {
  name: 'hello',
  data () {
    return {
      msg: '画的小人~',
      data:{
        lian:{
          cx:250,
          cy:120,
          r:100
        },
        yan1:{
          cx:200,
          cy:100,
          r:10
        },
        yan2:{
          cx:300,
          cy:100,
          r:10
        },
        sanjiao:{
          points:'240,140 260,140 250,120',
        },
        wuxing:{
          path:'m240.75,164.53524l7.63938,0l2.36063,-8.78524l2.36063,8.78524l7.63937,0l-6.18037,5.42952l2.36075,8.78524l-6.18038,-5.42966l-6.18038,5.42966l2.36075,-8.78524l-6.18038,-5.42952z',
        },
        shenti:{
          x:150,
          y:200,
          width:200,
          height:150
        },
        line1:{
          x1:150,
          y1:250,
          x2:100,
          y2:200
        },
        line2:{
          x1:350,
          y1:250,
          x2:400,
          y2:200
        },
        tui1:{
          d:'M190 330 L210 330 L210 400 L190 400 Z'
        },
        tui2:{
          d:'M290 330 L310 330 L310 400 L290 400 Z'
        }
      },
    }
  },
  methods:{
    render:function(data) {
    console.log(d3,this.$el)
    var svg = d3.select(this.$el)
    .append('svg')
    .attr('width', 500)
    .attr('height', 500)
    var circle=svg.append('circle')
    .attr('cx',data.lian.cx)
    .attr('cy',data.lian.cy)
    .attr('r',data.lian.r)
    .attr('stroke','black')
    .attr('fill','#fff')
    .attr('stroke-width',2)
    var yan1=svg.append('circle')
    .attr('cx',data.yan1.cx)
    .attr('cy',data.yan1.cy)
    .attr('r',data.yan1.r)
    .attr('stroke','black')  
    var yan2=svg.append('circle')
    .attr('cx',data.yan2.cx)
    .attr('cy',data.yan2.cy)
    .attr('r',data.yan2.r)
    .attr('stroke','black')  
    var sanjiao=svg.append('polygon')  
    .attr('points',data.sanjiao.points)
    .attr('stroke','black')  
    var wuxing=svg.append('path')  
    .attr('d',data.wuxing.path)
  
    var rect=svg.append('rect')
    .attr('x',data.shenti.x)
    .attr('y',data.shenti.y)
    .attr('width',data.shenti.width)
    .attr('height',data.shenti.height)
    .attr('stroke','black')
    .attr('fill','#fff')
    .attr('stroke-width',2)
    var line1=svg.append('line')
    .attr('x1',data.line1.x1)
    .attr('y1',data.line1.y1)
    .attr('x2',data.line1.x2)
    .attr('y2',data.line1.y2)
    .attr('stroke','black')
    .attr('stroke-width',2)
    var line2=svg.append('line')
    .attr('x1',data.line2.x1)
    .attr('y1',data.line2.y1)
    .attr('x2',data.line2.x2)
    .attr('y2',data.line2.y2)
    .attr('stroke','black')
    .attr('stroke-width',2)
    var tui1=svg.append('path')
    .attr('d',data.tui1.d)
    var tui2=svg.append('path')
    .attr('d',data.tui2.d)
    }
  },
  mounted() {
   this.render(this.data);
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}
svg{
   margin: 25px;
   border:1px solid red;
}
 
svg>path{
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}

</style>
